All files / src/components/reseller QuickActions.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import React from 'react';
import { useTranslation } from 'react-i18next';
import { 
  UserPlus, 
  Smartphone, 
  CreditCard, 
  LifeBuoy, 
  Clock, 
  Users,
  ChevronRight
} from 'lucide-react';
 
interface QuickAction {
  label: string;
  description: string;
  icon: React.ElementType;
  action: () => void;
  color: string;
}
 
interface QuickActionsProps {
  onAction: (view: string) => void;
}
 
export default function QuickActions({ onAction }: QuickActionsProps) {
  const { t } = useTranslation('reseller');
  const actions: QuickAction[] = [
    {
      label: t('quickActions.createUser'),
      description: t('quickActions.addNewSubscriber'),
      icon: UserPlus,
      action: () => onAction('create-user'),
      color: "text-blue-600"
    },
    {
      label: t('quickActions.issueDemo'),
      description: t('quickActions.generateTrialAccount'),
      icon: Clock,
      action: () => onAction('create-demo'),
      color: "text-orange-600"
    },
    {
      label: t('quickActions.manageDevices'),
      description: t('quickActions.resetOrKillSessions'),
      icon: Smartphone,
      action: () => onAction('devices'),
      color: "text-violet-600"
    },
    {
      label: t('quickActions.userList'),
      description: t('quickActions.viewAllSubscribers'),
      icon: Users,
      action: () => onAction('users'),
      color: "text-emerald-600"
    },
    {
      label: t('quickActions.buyCredits'),
      description: t('quickActions.topUpWallet'),
      icon: CreditCard,
      action: () => onAction('credits'),
      color: "text-indigo-600"
    },
    {
      label: t('quickActions.support'),
      description: t('quickActions.openTicket'),
      icon: LifeBuoy,
      action: () => onAction('tickets'),
      color: "text-rose-600"
    }
  ];
 
  return (
    <div className="grid gap-2 sm:gap-3 grid-cols-2 lg:grid-cols-3">
      {actions.map((action, index) => (
        <button
          key={index}
          onClick={action.action}
          className="group relative flex flex-col sm:flex-row items-center sm:items-center gap-2 sm:gap-4 p-3 sm:p-4 bg-card hover:bg-accent/50 border rounded-lg sm:rounded-xl transition-all text-center sm:text-left shadow-sm hover:shadow-md"
        >
          <div className={`p-2 sm:p-3 rounded-lg bg-background shadow-sm ring-1 ring-border group-hover:ring-foreground/10 transition-all`}>
            <action.icon className={`h-5 w-5 sm:h-6 sm:w-6 ${action.color}`} />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="font-semibold text-foreground text-xs sm:text-sm truncate">{action.label}</h3>
            <p className="text-[10px] sm:text-sm text-muted-foreground hidden sm:block">{action.description}</p>
          </div>
          <ChevronRight className="h-4 w-4 text-muted-foreground/50 group-hover:text-foreground transition-colors hidden sm:block" />
        </button>
      ))}
    </div>
  );
}